<template>
    <div class="f-header">
        <span class="logo">
            <el-icon class="mr-2"><eleme-filled /></el-icon>
            大数据2022
        </span>
        <el-icon class="icon-btn" @click="$store.commit('HANDLE_ASIDE_WIDTH')">
            <fold v-if="$store.state.asideWidth == '200px'" />
            <Expand v-else />
        </el-icon>
        <!-- 刷新 -->
        <el-icon class="icon-btn" @click="handleRefresh">
            <refresh />
        </el-icon>
        <div class="flex ml-auto items-center">
            <el-icon class="icon-btn" @click="toggle">
                <FullScreen v-if="!isFullscreen" />
                <aim v-else></aim>
            </el-icon>
            <el-dropdown>
                <span class="flex items-center text-light-50">
                    <el-avatar class="mr-2" size="small" :src="admin_info.avatar"></el-avatar>
                    {{ admin_info.nickName }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handle_update_password">修改密码</el-dropdown-item>
                        <el-dropdown-item @click="handle_logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <el-drawer v-model="drawer" size="45%" title="修改密码" :close-on-click-modal="false">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item prop="oldPassword" label="旧密码">
                <el-input v-model="form.oldPassword" placeholder="请输入旧密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码">
                <el-input v-model="form.newPassword" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="rePassword" label="确认密码">
                <el-input v-model="form.rePassword" placeholder="确认密码">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button color="#626aef" round type="primary" @click="onSubmit" :loading="loading">提交</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script setup>

import { reactive, onMounted, ref } from 'vue'
import { get_info, logout, update_password } from "@/axios/manager"
import { showModal } from '@/composables/utils'
import { removeToken } from '@/composables/auth'
import { useRouter } from 'vue-router'
import { useFullscreen } from '@vueuse/core';
import { ElNotification } from 'element-plus'

const drawer = ref(false)
const {
    //是否全屏状态
    isFullscreen,
    //切换全屏
    toggle
} = useFullscreen()

const router = useRouter()
const admin_info = reactive({
    nickName: '',
    avatar: ''
})

const form = reactive({
    oldPassword: "",
    newPassword: "",
    rePassword: ""
})
const rules = {
    oldPassword: [
        { required: true, message: '旧密码不能为空', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '新密码不能为空', trigger: 'blur' },
    ],
    rePassword: [
        { required: true, message: '确认密码不能为空', trigger: 'blur' },
    ]
}
const formRef = ref(null)
const loading = ref(false)

const onSubmit = () => {
    formRef.value.validate((valid => {
        if (!valid) {
            return false
        } else {
            loading.value = true
            console.log("调用后端的修改密码接口")
            update_password(form).then(res => {
                ElNotification({
                    title: 'Success',
                    message: '修改成功！',
                    type: 'success',
                })
                drawer.value = false
                removeToken()
                router.push("/login")
            }).finally(() => {
                loading.value = false
            })
        }
    }))
}

onMounted(() => {
    get_admin_info()
})


//修改密码
function handle_update_password() {
    drawer.value = true
    console.log("xiugaimima")
}
//退出登录
function handle_logout() {
    showModal("是否要退出登录？").then(() => {
        console.log("退出登录")
        //1 删除cookie里面token
        logout()
        //2 去后端接口使token失效
        removeToken()
        router.push("/login")
    })

}
function get_admin_info() {
    get_info().then((res) => {
        admin_info.nickName = res.nickName
        admin_info.avatar = res.avatar
        console.log(admin_info)
    })
}

const handleRefresh = () => location.reload()

</script>
<style scoped>
.f-header {
    z-index: 1000;
    @apply flex bg-indigo-700 fixed top-0 left-0 right-0 text-light-50;
    height: 64px
}

.logo {
    @apply flex justify-center items-center text-xl font-thin;
    width: 250px;
}

.icon-btn {
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}

.icon-btn:hover {
    @apply bg-indigo-600
}
</style>